<template>
    <div class="box">
        <div class="title">猜你喜欢</div>
        <router-link  :to="'/detail/'+item.id" tag="div" class="content"  v-for="(item,index) in imgUrl" :key="item.id">
            <div><img :src="item.url" alt=""></div>
            <div class="content_right">
                <p class="tit">{{item.address}}</p>
                <p class="star">
                    <span></span>
                    <span><span>{{item.text}}</span>条评论</span>
                </p>
                <p class="address">
                    <span><span class="orange">￥</span><span class="text">{{item.price}}</span><span>起</span></span>
                    <span class="addres">{{item.txt}}</span>
                </p>
                <p class="foot">{{item.content}}</p>
            </div>
        </router-link>
        <div class="foot-text">查看所有产品</div>
    </div>
</template>
<script>
     export default{
        data(){
            return{
        imgUrl:[
            {id:'00',address:'故宫',price:'40',text:'563403',txt:'东城区',content:'世界五大宫之首，穿越与您近在咫尺',url:'http://img1.qunarzz.com/sight/p0/1409/19/adca619faaab0898245dc4ec482b5722.jpg_200x200_1bc99086.jpg'},
            {id:'01',address:'八达岭长城',price:'35',text:'96449',txt:'延庆县',content:'不到长城非好汉',url:'http://img1.qunarzz.com/sight/p0/1708/2b/2b3b94de99c0a425a3.img.jpg_200x200_2458ffb2.jpg'},
            {id:'02',address:'北京欢乐谷',price:'145',text:'82844',txt:'朝阳区',content:'亚洲唯一飞行式过山车等你来挑战',url:'http://img1.qunarzz.com/sight/p0/1911/29/29d9b9078000774fa3.img.jpg_200x200_3621a35a.jpg'},
            {id:'03',address:'北京叶生动物园',price:'122',text:'30852',txt:'大兴区',content:'敢与森林之王近距离接触吗？',url:'http://img1.qunarzz.com/sight/p0/1507/cc/19733fc0135062788140cbb48ae606a7.water.jpg_200x200_d9ebe2fd.jpg'}
        ]
            }
        }
    }
</script>
<style lang="stylus" scoped>
    .box .title{
        width 100%
        text-align left 
        text-indent .1rem
        margin:5px 5px
    }
    .content{
        width 100%
        height 130px
        border-bottom:1px solid gray
        margin: 0 0 15px 0
        display flex
    }
    .content div{
        margin 5px 5px
    }
    .content div img{
        width 100px
        height 100px
    }
    .content .content_right p{
        text-align  left
        margin 15px 2px
        font-size 12px
    }
    .content .content_right .tit{
        font-size 16px
    }
    .content .content_right .address .orange{
        color orange
    }
    .content .content_right .address{
        display flex
        justify-content space-between
    }
    .content .content_right .address .text{
        color:orange;
        font-size 20px
    }
    .foot-text{
        width 100%
        height 50px
        line-height 50px
        text-align center
        color:#00AFC7;
    }
</style>